<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 300px;
        height: 200px;
        border: 10px solid black;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

<!-- 
  盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是标准盒模型。

  解决在网页开发中的元素之间的位置关系的

  每一个盒模型都由四部分组成
    content(width/height): 内容
    padding: 内填充
    border: 边框
    margin: 外间距
 -->
